<template>
  <MeModal ref="modalRef" width="500px">
    <n-form
      ref="modalFormRef"
      label-placement="left"
      require-mark-placement="left"
      :label-width="130"
      :model="modalForm"
    >
      <n-form-item label="所属组" path="group_id" :rule="required">
        <n-select
          v-model:value="modalForm.group_id"
          label-field="name"
          value-field="id"
          :options="configGroupData"
          placeholder="请选择配置组"
        />
      </n-form-item>
      <n-form-item label="配置标题" path="name" :rule="rules.required">
        <n-input v-model:value="modalForm.name" placeholder="请输入配置标题" />
      </n-form-item>
      <n-form-item label="配置标识" path="key" :rule="rules.required">
        <n-input v-model:value="modalForm.key" placeholder="配置标识(英文)" />
      </n-form-item>
      <n-form-item label="配置值" path="value">
        <n-input v-model:value="modalForm.value" placeholder="配置默认值" />
      </n-form-item>
      <n-form-item label="配置组件" path="input_type" :rule="rules.required">
        <n-select
          v-model:value="modalForm.input_type"
          :options="CONFIG_COMPONENT_LIST"
          placeholder="请选择配置组件"
        />
      </n-form-item>
      <n-form-item label="排序" path="sort">
        <n-input-number v-model:value="modalForm.sort" min="0" placeholder="请输入排序" />
      </n-form-item>
      <n-form-item label="配置说明" path="remark">
        <n-input v-model:value="modalForm.remark" placeholder="请输入配置说明" />
      </n-form-item>
      <n-form-item
        v-if="
          modalForm.input_type === 'checkbox'
            || modalForm.input_type === 'radio'
            || modalForm.input_type === 'select'
        "
        label="默认数据"
        path="config_select_data"
      >
        <n-dynamic-input
          v-model:value="modalForm.config_select_data"
          preset="pair"
          key-placeholder="请输入标签名"
          value-placeholder="请输入标签值"
        />
      </n-form-item>
    </n-form>
  </MeModal>
</template>

<script setup>
import { MeModal } from '@/components/index.js'
import { useForm, useModal } from '@/composables'
import { CONFIG_COMPONENT_LIST } from '@/constants'
import api from '../api'

defineProps(['configGroupData'])

const emit = defineEmits(['refresh'])

const [modalFormRef, modalForm, validation, rules] = useForm()

const [modalRef, okLoading] = useModal()

const required = {
  required: true,
  type: 'number',
  message: '此为必填项',
  trigger: ['blur', 'change'],
}

const defaultForm = {
  group_id: undefined,
  name: '',
  key: '',
  value: '',
  sort: 0,
}

const modalAction = ref('')

function handleOpen(options = {}) {
  const { action, row = {}, ...rest } = options
  modalAction.value = action
  modalForm.value = { ...defaultForm, ...row }
  modalRef.value.open({ ...rest, onOk: onSave })
}

async function onSave() {
  await validation()
  okLoading.value = true
  try {
    let res
    const data = Object.assign({}, modalForm.value)
    data.config_select_data && data.config_select_data.forEach((item) => {
      item.content = item.value
    })
    if (modalAction.value === 'add') {
      res = await api.createConfig(modalForm.value)
    }
    else if (modalAction.value === 'edit') {
      res = await api.updateConfig(modalForm.value)
    }
    $message.success(res.message)
    emit('refresh', { group_id: modalForm.value.group_id })
  }
  finally {
    okLoading.value = false
  }
}

defineExpose({
  handleOpen,
})
</script>
